<template>
    <nut-navbar id="navbaar"
            @on-click-back="back"
            @on-click-more="more"
            :leftShow="true"
            :rightShow="true"
    >{{titleName}}</nut-navbar>
</template>

<script>
    /* eslint-disable no-console */

    export default {
        name: "navBar",
        props: ["titleName"],
        methods: {
            back(){
                this.$router.go(-1);
            },
            more(){
                console.log('header头部， 点击更多')
            },
            handleScroll () {
                var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
                var offsetTop = 0
                if(document.querySelector('#navbaar') != null){
                offsetTop = document.querySelector('#navbaar').offsetTop
                }
                if (scrollTop > offsetTop) {
                    this.searchBarFixed = true
                } else {
                    this.searchBarFixed = false
                }
            }
        },
        mounted () {
            window.addEventListener('scroll', this.handleScroll)
        },
        destroyed () {
            window.removeEventListener('scroll', this.handleScroll)
        }
    }
</script>

<style scoped>
    .nut-navbar{
        position:fixed;
        background-color:#e6e6e6;
        top:0;
        height: 42px;
        min-width: 96%;
        max-width: 100%;
    }

</style>
